import {Movie} from "@/app/types";
import Image from "next/image";
import {useRouter} from "next/navigation";


interface MovieProps {
    movie: Movie

}


const MovieCard = ({movie}: MovieProps) => {
    const router = useRouter()
    const viewDetailClick = (id: number) => {
        console.log('123', id)
        router.push(`/movies/${id}`);
    };

    return (
        <div className="border rounded-lg p-4">
            {movie.posterUrl ?
                <Image src={movie.posterUrl} alt={movie.title} className="w-full h-40 object-cover"
                       width={200} height={300}/> : null}
            <h2 className="text-xl">{movie.title}</h2>
            <p>Average Rating: {movie.averageRating?movie.averageRating.toFixed(2):''}</p>
            <button className="bg-blue-500 text-white p-2 rounded"
                    onClick={() => viewDetailClick(movie.id)}>View Details
            </button>
        </div>
    );
};

export default MovieCard;